<template>
  <div style="width: 100%">
    <el-table border :data="props.tableData" max-height="400px" :size="size">
      <el-table-column prop="materialName" label="素材名称" />
      <el-table-column prop="typeName" label="所属分类" />
      <el-table-column label="操作" width="90">
        <template #default="scope">
          <el-link
            :underline="false"
            link
            type="primary"
            size="small"
            @click.prevent="handleDetail(scope.row)"
            >查看</el-link
          >
          <el-link
            v-if="type !== 'detail'"
            :underline="false"
            link
            type="danger"
            size="small"
            @click.prevent="handleDel(scope.row)"
            >移除</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <MaterialDetail
      v-if="visibleMaterialDetail"
      v-model:dialogVisible="visibleMaterialDetail"
      :form="item"
    ></MaterialDetail>
  </div>
</template>

<script setup lang="ts">

import openMsgBox from '@/hooks/messageBox.js'
import MaterialDetail from '../../infoSettingDetail/components/MaterialDetail.vue'
const props = defineProps({
  tableData: {
    type: Array<any>,
  },
  type: {
    type: String,
  },
  size: {
    type: String,
  },
})
const size = ref<any>(props.size)
const item = ref({})
const visibleMaterialDetail = ref(false)
const emits = defineEmits(['update:tableData'])
const handleDel = (row) => {
  openMsgBox(
    {
      tips: '确定要移除吗？',
    },
    () => {
      const list = props.tableData.filter((e) => e.materialId !== row.materialId)
      emits('update:tableData', list)
    },
    () => {
     
    }
  )
 
 
}
const handleDetail = (row) => {
  console.log(row)

  item.value = row
  visibleMaterialDetail.value = true
}
</script>

<style lang="scss" scoped></style>
